<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3-08 拐角stroke-linejoin</title>
</head>
<body>
  <svg width="400" height="400">
    <!-- 尖角 -->
    <polyline
      points="30 60, 60 30, 90 60"
      fill="none"
      stroke="blue"
      stroke-width="20"
      stroke-linejoin="miter"
    />
  
    <!-- 圆角 -->
    <polyline
      points="30 120, 60 90, 90 120"
      fill="none"
      stroke="blue"
      stroke-width="20"
      stroke-linejoin="round"
    />
  
    <!-- 平角 -->
    <polyline
      points="30 180, 60 150, 90 180"
      fill="none"
      stroke="blue"
      stroke-width="20"
      stroke-linejoin="bevel"
    />
  </svg>
</body>
</html>